<!--
* description: 维修管理-追溯件更换信息查询
* author: hzm
* createdDate: 2021-4-29
-->
<template>
  <div class="app-container app-container-table">
    <one-table-template
      ref="multipleTable"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-api-config="dynamicApiConfigs"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-select="true"
      :dynamic-is-init-table="true"
      :dynamic-is-fix-choose="false"
      :dynamic-is-fix-index="false"
      :dynamic-api-style="'restful'"
      :callback-obj="callbackObj"
    />
    <edit
      :key="editPopupsKey"
      :dynamic-edit-row-data="editRowData"
      :popups-visible="editPopupsVisible"
      :popups-state="editPopupsState"
      :dynamic-api-style="'restful'"
      :edit-row-data="editRowData"
      @close="close"
    />
  </div>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { orgApis } from '@/api/caseManagementQuery'

export default {
  name: 'RetroactivePartInquiry',
  components: {
    OneTableTemplate,
    Edit: () => import('./edit')
  },
  mixins: [oneTableWithViewTemplateMixins],
  data() {
    return {
      editRowData: {},
      dynamicApiConfigs: orgApis.tracingPartsQuery,
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'controlBtn',
              label: '操作', // 操作
              codeField: 'orgName',
              width: null,
              align: 'center',
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey0',
                  align: 'center',
                  labelName: '详情',
                  codeField: 'editControlBtn',
                  rowFileds: 'show:isCommit-1|0',
                  clickEvent: (index) => this.edit(index, 'edit'),
                  component: () => import('@/components/org/linkButton')
                },
                {
                  compKey: 'propKey1',
                  align: 'center',
                  labelName: '修改',
                  rowFileds: 'show:isCommit-0',
                  clickEvent: (index) => this.edit(index, 'detail'),
                  component: () => import('@/components/org/linkButton')
                }
              ]
            },
            {
              prop: 'dlrCode',
              label: '门店编码',
              align: 'center'
            },
            {
              prop: 'dlrFullName',
              label: '门店名称',
              align: 'center'
            },
            {
              prop: 'vin',
              label: 'VIN',
              align: 'center'
            },
            {
              prop: 'repairOrderCode',
              label: '派工单号',
              align: 'center'
            },
            {
              prop: 'replaceTypeName',
              label: '追溯件类别',
              align: 'center'
            },
            {
              prop: 'partsCode',
              label: '原追溯件编码',
              align: 'center'
            },
            {
              prop: 'newCode',
              label: '新件编码',
              align: 'center'
            },
            {
              prop: 'whereaboutsName',
              label: '去向单位名称',
              align: 'center'
            },
            {
              prop: 'whereaboutsCode',
              label: '去向单位统一社会信用代码',
              align: 'center'
            },
            {
              prop: 'createdDate',
              label: '出库日期',
              align: 'center'
            },
            {
              prop: 'creator',
              label: '登记人',
              align: 'center'
            }
          ],
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            // 库存状态
            {
              compKey: 'compKey1',
              labelName: '出库日期：',
              codeField: 'createdStartDate,createdEndDate',
              component: () =>
                import('@/components/org/datePicker/andtDatePicker'),
              type: 'YYYY-MM-DD',
              format: 'yyyy-MM-dd',
              dateOptionsType: '0',
              isMust: true,
              span: 6
            },
            // 车辆状态
            {
              compKey: 'compKey2',
              labelName: '门店编码：',
              codeField: 'dlrCode',
              component: () => import('@/components/ve/salesStore'),
              type: 'dropdownList',
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey3',
              labelName: '派工单号：',
              codeField: 'repairOrderCode',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey4',
              labelName: 'VIN：',
              codeField: 'vin',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true,
              span: 6
            }
          ],
      tableButtons: [
        {
          compKey: 'btnKey1',
          size: 'small',
          clickEvent: () => this.add(),
          name: 'add',
          position: 'left',
          text: '新增'
        },
        {
          conmpKey: 'btenKey2',
          type: 'primary',
          size: 'small',
          text: '查询',
          name: 'search',
          clickEvent: () => this.queryTable(1),
          position: 'right'
        },
        {
          compKey: 'btnKey6',
          size: 'small',
          name: 'confirm',
          clickEvent: () => this.editSave(),
          text: '提交',
          disabled: true,
          position: 'left'
        },
        {
          conmpKey: 'btenKey5',
          size: 'small',
          text: '删除',
          name: 'cancel',
          clickEvent: () => this.dele(),
          disabled: true,
          position: 'left'
        },
        {
          conmpKey: 'btenKey3',
          size: 'small',
          text: '导出',
          name: 'export',
          clickEvent: () => this.exportExcel(),
          position: 'left'
        },
        {
          conmpKey: 'btenKey4',
          size: 'small',
          text: '重置',
          name: 'reset',
          clickEvent: () => this.reset(),
          position: 'right'
        }
      ],
      formField: this.$utils.getFormField(this, {
        createdStartDate: '',
        createdEndDate: '',
        dlrCode: '',
        repairOrderCode: '',
        vin: ''
      }),
      callbackObj: {
        onCheckSelectChange: (selection) => {
          this.selectTable = selection
          this.handleSelectionChange(selection)
        }
      }
    }
  },
  mounted() {
    this.queryTable(1)
  },
  methods: {
    getSelectable(row, index, ref) {
      return row['isCommit'] === '0'
    },
    close(type) {
      this.editPopupsVisible = type
    },
    edit(index, status) {
      this.editPopupsState = status
      this.editPopupsVisible = true
      this.editRowData = this.$utils.deepCopy(
        this.$refs['multipleTable'].list[index]
      )
    },
    add() {
      this.editPopupsState = 'add'
      this.editPopupsVisible = true
    },
    exportExcel() {
      const fileName = this.$utils.fileNameWithTime('追溯件更换信息.xlsx')
      this.$requestAPI({
        apiUrl: orgApis.exportParts.APIUrl,
        variables: { ...this.formField, dataType: 'excel' }
      })
        .then((res) => {
          this.$utils.downloadFile(res, fileName)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 批量删除按钮
    dele() {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const tableList = this.selectTable.map((item) => {
          return Object.assign({}, { 'partsReplaceId': item.partsReplaceId })
        })
        const that = this
        const queryObj = {
          type: 'mutation',
          apiConfig: {
            ServiceCode: 'delTraceableParts',
            APIUrl:
            '/mp/e3sh/aftersale/WorkOrderManagementService/delTraceableParts.do'
          },
          variables: {
            list: tableList
          }
        }
        var paramD = this.$getParams(queryObj)
        this.$requestAPI(paramD).then((response) => {
          if (response.result === '1') {
            that.$message({
              message: response.msg,
              type: 'success',
              duration: 1000
            })
            that.queryTable(1)
          } else {
            // 删除失败
            that.$message({
              message: response.msg,
              type: 'warn',
              duration: 1000
            })
          }
        })
      })
    },
    // 批量提交按钮
    editSave() {
      this.$confirm('确定要提交吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const tableList = this.selectTable.map((item) => {
          return Object.assign({}, { 'partsReplaceId': item.partsReplaceId })
        })
        const that = this
        const queryObj = {
          type: 'mutation',
          apiConfig: {
            ServiceCode: 'submitTraceableParts',
            APIUrl:
            '/mp/e3sh/aftersale/WorkOrderManagementService/submitTraceableParts.do'
          },
          variables: {
            list: tableList
          }
        }
        var paramD = this.$getParams(queryObj)
        this.$requestAPI(paramD).then((response) => {
          if (response.result === '1') {
            that.$message({
              message: response.msg,
              type: 'success',
              duration: 1000
            })
            that.queryTable(1)
          } else {
          // 提交失败
            that.$message({
              message: response.msg,
              type: 'warn',
              duration: 1000
            })
          }
        })
      })
    },

    // 当选择项发生变化时会触发该事件
    handleSelectionChange(selection) {
      const btns = this.tableButtons.filter(o => o.disabled !== undefined)
      if (btns.length > 0) {
        const isCheck = selection && selection.length > 0
        btns.forEach((item) => {
          item.disabled = !isCheck
        })
      }
    }
  }
}
</script>

<style>
</style>
